
<template>
    <div class="forumItemContainer">
        <div v-if="!loading">
            <div class="upper">
                <div class="userPart">
                        <img :src="userInfo.picUrl" alt="头像">
                        <div class="userName">{{userInfo.nickname}}</div>     
                        <div class="attention" v-if="!isAttentioned" @click="giveAttention">关注+</div>
                        <div class="attention" v-if="isAttentioned" @click="giveAttention">已关注</div>           
                </div>
                <div class="posttime">帖子发表: <TimeDiff :dateString="forumInfo.createTime" v-if="flag" /></div>
            </div>
            <div class="contentContainer">
                <div class="contentPart">
                    <div class="title">
                        {{forumInfo.title}}
                    </div>
                    <div class="content" >
                        <div class="ql-editor" v-html="forumInfo.content"></div>
                    </div>
                </div>
                
            </div>
            <div class="Inter">
                <interactionBox 
                    :postId="postId"/>
                <div class="commentPart">
                    <div class="commentBtn" @click="editPost" @click.stop="editPost" v-if="showOp1">修改</div>
                    <div class="commentBtn" @click="changeStatus" @click.stop="">回复</div>
                    <div class="commentBtn" @click="deletePost" v-if="showOp">删除</div>
                </div>
            </div>
            
            <div class="bottomLine"></div>
        </div>
    </div>
</template>

<script>
import InteractionBox from '../components/InteractionBox.vue'
import TimeDiff from "./TimeDiff.vue";
import identicon from 'identicon.js'
export default {
    name: 'ForumDetailItem',
    data(){
        return {
            forumInfo:{},
            userInfo:{},
            flag:false,
            loading:true,
            showComment:false,
            showOp:false,
            showOp1:false,
            isAttentioned:false
        }
    },
    props:['postId'],
    mounted(){
        this.$axios({
            method:'get',
            url:`/api/posts/findId/${this.$route.query.postId}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            if(res.data.code){
                this.forumInfo = res.data.data
                this.$axios({
                method:'get',
                url:`/api/users/${res.data.data.userId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
                }).then(res1=>{
                    if(res1.data.code){
                        this.userInfo = res1.data.data
                        if(res1.data.data.userId==localStorage.getItem('userId')||localStorage.getItem('uType')==0){
                            this.showOp = true
                        }
                        if(res1.data.data.userId==localStorage.getItem('userId')){
                            this.showOp1 = true
                        }
                        if(res1.data.data.picUrl==null||res1.data.data.picUrl==''){
                            this.userInfo.picUrl = 'data:image/png;base64,'+new identicon(this.md5(res1.data.data.nickname), 420).toString()
                        }
                        this.flag=true
                        this.loading=false
                    }
                })
                this.$axios({
                    method:'get',
                    url:`/api/attentions/${localStorage.getItem('userId')}/${res.data.data.userId}`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res2=>{
                    if(res2.data.code==1&&res2.data.data!=null){
                        this.isAttentioned = true
                    }
                    this.$forceUpdate()
                })
            }
        })
    },
    components:{
        InteractionBox,
        TimeDiff
    },
    methods:{
        giveAttention(){
            if(this.isAttentioned){
                this.$axios({
                    method:'delete',
                    url:`/api/attentions/${localStorage.getItem('userId')}/${this.forumInfo.userId}`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res=>{
                    if(res.data.code){
                        this.isAttentioned = false
                    }
                    this.$forceUpdate()
                })
            }else{
                this.$axios({
                    method:'post',
                    url:`/api/attentions`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    },
                    data:{
                        userId:localStorage.getItem('userId'),
                        focusedId:this.forumInfo.userId
                    }
                }).then(res=>{
                    if(res.data.code){
                        this.isAttentioned = true
                    }
                    this.$forceUpdate()
                })
            }
        },
        goDetail(){
            this.$router.push({path:'/ForumDetail'})
        },
        changeStatus(){
            this.showComment = !this.showComment
        },
        editPost(){
            // console.log(1)
            this.$emit('shEdit',this.forumInfo.postId)
        },
        deletePost(){
            this.$axios({
                method:'delete',
                url:`/api/posts/${this.forumInfo.postId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.data.code){
                    this.$router.push({path:'/Forum'})
                }
            })
        }
    },
    watch:{
        showComment(){
            this.$emit('showComId',this.forumInfo.postId)
        }
    }
}
</script>
   
<style scoped>
    .forumItemContainer{
        width: 60%;
        margin-left: 20%;
        margin-top: 1%;
        padding-bottom: 1%;
    }
    .upper{
        /* background-color: aqua; */
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .userName{
        margin-left: 10px;
        font-size: 1.3em;
        color: #fff;
    }
    .userPart{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .userPart img{
        width: 10%;
        height: 10%;
        border-radius: 50%;
    }
    .attention{
        margin-left: 30px;
        font-size: 0.8em;
        width: 45px;
        text-align: center;
        color: #fff;
        border: 1px solid #fff;
        padding: 3px 6px;
        border-radius: 5px;
        margin-top: 3px;
    }
    .attention:hover{
        cursor: pointer;
        color: pink;
        border: 1px solid pink;
    }
    .title{
        margin-top: 3%;
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
        font-family: 'SimHei';
        word-wrap: break-word;
    }
    .content{
        margin-top: 3%;
        font-size: 1.3em;
        width: 95%;
        color: #fff;
        font-family: 'SimHei';
        word-wrap: break-word;
    }

    .posttime{
        margin-right: 2%;
        width: 15%;
        font-size: 0.85em;
        color: #aaa;
    }

    .Inter{
        width: 70%;
        margin-left: 15%;
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .bottomLine{
        width: 94%;
        margin-top: 2%;
        border-bottom: 1px dashed #aaa;
    }
    .contentContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 95%;
        height: 100%;
        margin-left: 2.5%;
        margin-top: 1%;
    }
    .commentPart{
        /* background-color: #fff */
        width: 40%;
        text-align: center;
        /* 让字垂直居中 */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: white;
    }
    .commentBtn{
        width: 30px;
        height: 20px;
        border-radius: 5px;
        background-color: #4d4d4d;
        color: white;
        /* border: 1px solid white; */
        outline: none;
        cursor: pointer;
        font-size: 0.9em;
    }
    .commentBtn:hover{
        /* border: 1px solid pink; */
        color: pink;
    }
    ::v-deep .emoticon-image{
        display: inline-block;
        margin: 0 10px;
        width: 60px;
        height: 60px;
        vertical-align: text-bottom;
        background-size: cover;
        background-position: center;
    }
    ::v-deep img{
        max-width: 100%;
    }
    ::v-deep .mhy-video-frame{
        height: 300px;
    }
    ::v-deep iframe{
        width: 100%;
        height:100%
    }
</style>
